<template>
  <section id='foot_guide'>
    <section @click = "gotoAddress('/home')" class="guide_item">
        <i class="icon_style iconfont icon-shouye"
           :class="[this.$route.path.indexOf('home') !== -1 ? 'is-selected' : '']"
        ></i>
      <span :class="[this.$route.path.indexOf('home') !== -1 ? 'is-selected' : '']">主页</span>
    </section>
    <section @click = "gotoAddress('/room_index' )" class="guide_item">
      <i class="icon_style iconfont icon-fangxingweixuanzhong"
         :class="[this.$route.path.indexOf('room') !== -1 ? 'is-selected' : '']"
      ></i>
      <span :class="[this.$route.path.indexOf('room') !== -1 ? 'is-selected' : '']">空间</span>
    </section>

    <circle-menu  class="guide_item" type="top" :number='3' mask='white'>
      <i class="icon_style iconfont icon-add add" slot="item_btn"></i>
      <router-link to="/create_post" slot="item_1" class="fa">分享</router-link>
      <router-link to="/create_room" slot="item_2" class="fa">空间</router-link>
      <router-link to="/create_album" slot="item_3" class="fa" >相册</router-link>
    </circle-menu>

    <section @click = "gotoAddress('/application')" class="guide_item">
      <i class="icon_style iconfont icon-jiaoxing"
         :class="[this.$route.path.indexOf('application') !== -1 ? 'is-selected' : '']"
      ><badge size="small" type="error" class="badge" v-show="unreadCount != 0">{{unreadCount}}</badge></i>
      <span :class="[this.$route.path.indexOf('application') !== -1 ? 'is-selected' : '']">消息</span>
    </section>
    <section @click = "gotoAddress('/profile')" class="guide_item">
      <i class="icon_style iconfont icon-account"
         :class="[this.$route.path.indexOf('profile') !== -1 ? 'is-selected' : '']"
      ></i>
      <span :class="[this.$route.path.indexOf('profile') !== -1 ? 'is-selected' : '']">我的</span>
    </section>

  </section>
</template>

<script>
  import CircleMenu from '../../components/common/CircleMenu'
  import { Badge } from 'mint-ui';
  export default {
    data(){
      return{
          unreadCount: 0,
      }
    },
    components: {
      Badge,
      CircleMenu
    },
    created(){

    },
    mounted(){
      this.getUnreadCount();
    },
    computed: {
    },
    methods: {
      gotoAddress(path){
        this.$router.push(path)
      },
      async getUnreadCount(){
        this.unreadCount = 0;
        let application_res = null;
        let application_url = '/v1/unread_application?roomCreator=' + this.$store.state.userInfo.userId
        await this.axios.get(application_url)
          .then(response => {
            application_res = response.data;
          })
        if (application_res.success){
            this.unreadCount = application_res.result[0].unreadCount;
        }

        let notification_res = null;
        let notification_url = '/v1/unread_notification?notifiedId=' + this.$store.state.userInfo.userId
        await this.axios.get(notification_url)
          .then(response => {
            notification_res = response.data;
          })
        if (notification_res.success){
          this.unreadCount = this.unreadCount + notification_res.result[0].unreadCount;
        }
        if (this.unreadCount > 10){
            this.unreadCount = '10+';
        }
      }
    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .pink{
    background-color: #FFFFFF;
  }
</style>
<style lang="scss" scoped>
  @import '../../style/mixin';

  #foot_guide{
    background-color: #fff;
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    bottom: 0;
    @include wh(100%, 1.95rem);
    display: flex;
    box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);
  }
  .guide_item{
    flex: 1;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;

    .icon_style{
      font-size: 0.8rem;
      color: #666;
      @include wh(.8rem, .8rem);
      margin-bottom: .3rem;
      fill: #ccc;
    }

    .add{
      font-size: 1.2rem;
      border: solid 0.05rem #666;
      border-radius: 0.75rem
    }

    .is-selected{
      color: #33CCFF;
    }
    span{
      @include sc(.45rem, #666);
    }
    .badge{
      display: inline;
      color: #FFFFFF;
      position: relative;
      left: -0.2rem;
      top: -0.2rem;
      padding: 1px 3px;
    }

    .fa{
      display: inline-block;
      width: 100%;
      height: 100%;
      @include sc(.7rem, #fff);
      margin: 25% 0;

    }
  }


</style>
